<template>
	<view v-if="goods_detail.goods_name">
		<!-- 轮播图 -->
		<swiper indicator-dots autoplay circular :interval="3000" :duration="1000">
			<swiper-item v-for="(i, index) in goods_detail.pics"><image class="swiper-pic" @click="showPreView(index)" :src="i.pics_sma_url" mode="aspectFit" /></swiper-item>
		</swiper>
		<!-- 商品信息 -->
		<view class="goods">
			<view class="price">￥ {{ goods_detail.goods_price }}</view>
			<view class="info">
				<view class="title">{{ goods_detail.goods_name }}</view>
				<view class="icon">
					<uni-icons type="star" size="20" color="#aba49e"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<view class="expenses">快递：免运费</view>
		</view>
		<!-- 富文本 -->
		<view class="ditele">
			<rich-text :nodes="goods_detail.goods_introduce" />
		</view>
		<!-- 商品购物车区域 -->
		<view class="shop-cart">
			<uni-goods-nav :options="options" fill @click="onClick" @buttonClick="onButtonClick" />
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
	name: 'goods-detail',
	computed: {
		...mapGetters('m_cart', ['total'])
	},
	data() {
		return {
			goods_id: 0,
			goods_detail: {},
			options: [
				{
					icon: 'shop',
					text: '店铺'
				},
				{
					icon: 'cart',
					text: '购物车',
					info: 0
				}
			]
		}
	},
	onLoad(options) {
		this.goods_id = options.goods_id;
		this.getGoodsDetail();
	},
	methods: {
		// 获取商品详情请求方法
		async getGoodsDetail() {
			const { data: res } = await uni.$http.get('goods/detail', { goods_id: this.goods_id });
			res.message.goods_introduce = res.message.goods_introduce.replaceAll('<img', '<img style="display:block" ').replaceAll('webp', 'jpg')
			this.goods_detail = res.message
		},
		// 图片预览点击事件
		showPreView(i) {
			uni.previewImage({
				current: i,
				urls: this.goods_detail.pics.map(v => v.pics_big_url)
			});
		},
		// 购物车上左侧图标的点击事件
		onClick (e) {
		  if (e.content.text === '购物车') {
		    uni.switchTab({
		      url:'/pages/cart/cart'
		    })
		  }
		},
		// 购物车组件左侧按钮点击事件
		onButtonClick (e) {
			if (e.content.text === '加入购物车') {
				const newObj = {
					goods_id: this.goods_detail.goods_id,
					goods_name: this.goods_detail.goods_name,
					goods_price: this.goods_detail.goods_price,
					goods_count: 1,
					goods_state: true,
					goods_small_logo: this.goods_detail.goods_small_logo
				}
				this.$store.commit('m_cart/addToCart', newObj)
			}
		},
	},
	watch: {
		total: {
			handler(n) {
				this.options[1].info = n
			},
			immediate: true
		}
	}
};
</script>

<style lang="scss">
swiper {
	height: 750rpx;
	.swiper-pic {
		width: 100%;
		height: 100%;
	}
}
.goods {
	padding: 20rpx;
	.price {
		color: #c00000;
		font-size: 16px;
	}
	.info {
		display: flex;
		margin: 20rpx 0;
		font-size: 14px;
		.icon {
			width: 60px;
			display: flex;
			color: gray;
			flex-direction: column;
			align-items: center;
		}
		.title {
			border-right: 1px solid #f2f1ee;
			padding-right: 4px;
			flex: 1;
		}
	}
	.expenses {
		color: gray;
		font-size: 12px;
	}
}
.ditele {
	padding-bottom: 56px;
}
.shop-cart {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: 18rpx;
	background-color: #fff;
}
</style>
